<template>
	<view class="detail_wrap">
		<!-- <u-notify message="Hi uView" :show="notify_show"></u-notify> -->
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
		<view class="setting">
			<view  @click="reset">
				<u-icon size="26" name="reload" color="#F7EED"></u-icon>
				<view class="label">重置</view>
			</view>
			<view  @click="delete_one_counter">
				<u-icon size="26" name="trash" color="#F7EED"></u-icon>
				<view class="label">删除</view>
			</view>
		</view>
		<view class="total">
			{{form.current_amount}}
		</view>

		<u-form labelPosition="left" labelWidth="auto" :model="form" ref="uForm">
			<u-form-item label="标题:" prop="target" borderBottom ref="item1">
				<u-input v-model="form.target"></u-input>
			</u-form-item>
			<u-form-item label="目标:" prop="target_amount" borderBottom ref="item1">
				<u-input v-model="form.target_amount" ></u-input>
			</u-form-item>
			<u-form-item label="增加步长:" borderBottom ref="item1">
				<u-number-box v-model="form.add_step" button-size="36" color="#ffffff" bgColor="#2979ff"
					iconStyle="color: #fff"></u-number-box>
			</u-form-item>

			<u-form-item label="减少步长:" borderBottom ref="item1">
				<u-number-box v-model="form.decrease_step" button-size="36" color="#ffffff" bgColor="#2979ff"
					iconStyle="color: #fff"></u-number-box>
			</u-form-item>
			<u-form-item label="时间段:" label-width="auto">
				<!-- <u-input v-model="form.time_range" style="width: 800rpx;"></u-input> -->
				<view style="margin-right: 150rpx">
					{{form.range_time}}
				</view>	
				<u-icon name="arrow-right" size="20" @click="calendar_show = true"></u-icon>
				<u-calendar :show="calendar_show" mode="range" @confirm="confirm">
				</u-calendar>
			</u-form-item>
		</u-form>
		<u-button class="submit-btn" type="primary" text="" @click="update_one_counter">提交</u-button>
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'

	export default {
		data() {
			return {
				form: {
					target: "",
					add_step: 1,
					decrease_step: 1,
					start_time: "",
					end_time: "",
					time_range: "",
					target_amount:""
				},
				detail: {},
				calendar_show: false,
				mode: 'range',
				value: 0,
				notify_show: false
			}
		},
		computed: {
			rang_time() {
				const {
					start_time,
					end_time
				} = this.form
				return start_time && end_time ? `${start_time}->${end_time}` : ""
			}
		},
		onLoad() {
			this.get_counter_detail()
		},
		methods: {
			reset(){
				
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			add_step_change(e) {
				this.form.add_step = e.value
				console.log('当前值为: ' + e.value)
			},
			confirm(e) {
				this.form.start_time = e[0]
				this.form.end_time = e[e.length - 1]
				this.form.range_time = e[0] && e[e.length - 1] ? `${e[0]} / ${e[e.length-1]}` : ""
				console.log('this.form.range_time', this.form.range_time);
				this.calendar_show = false
			},
			open_calendar() {
				this.calendar_show = true
			},
			async get_counter_detail() {
				const {
					id
				} = this.$route.query
				const {
					data
				} = await request('GET', '/api/getCounterDetail', {
					id
				})
				this.form = data
				const { start_time, end_time}  = this.form
				this.form.range_time = `${start_time} / ${end_time}`
			},
			async update_one_counter() {
				const {
					data
				} = await request('POST', '/api/updateOneCounter', {
					...this.form
				})
				this.$refs.uNotify.success('修改成功')
				this.get_counter_detail()
			},
			async delete_one_counter() {
				const {
					id
				} = this.$route.query
				const {
					data
				} = await request('get', '/api/deleteOneCounter', {
					id
				})
				this.$refs.uNotify.success('删除成功')
				uni.navigateTo({
					url: `/`
				})
			},
			async reset() {
				const {
					id
				} = this.$route.query
				const {
					data
				} = await request('get', '/api/resetOneCounter', {
					id
				})
				this.$refs.uNotify.success('重置成功')
				this.get_counter_detail()
			},
		}
	}
</script>

<style>
	.submit-btn {
		margin-top: 80rpx;
	}

	.step {
		margin-right: 30rpx;
		font-size: 34rpx;
	}

	.add_step {
		margin-left: 10rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.total {
		margin: 80rpx 0;
		font-size: 120rpx;
		text-align: center;
	}

	.detail_wrap {
		padding: 30rpx;
		box-sizing: border-box;
		width: 100%;
		height: 100vh;
		background-color: #eee;
	}

	.setting {
		width: 150rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.label {
		font-size: 26rpx;
	}
</style>
